import React from 'react';
import classnames from 'classnames';

type ButtonSize = 'lg' | 'sm';
type ButtonType = 'primary' | 'default' | 'danger' | 'link'
interface BaseButtonProps {
    className?: string;
    disabled?: boolean;
    size?: ButtonSize;
    btnType?: ButtonType;
    children?: React.ReactNode;
    href?: string;
}

export type ButtonProps = Partial<
    BaseButtonProps
    & React.AnchorHTMLAttributes<HTMLElement>
    & React.ButtonHTMLAttributes<HTMLElement>
>;

const Button: React.FC<ButtonProps> = (props) => {
    const {
        btnType = 'default',
        disabled = false,
        size, children,
        className,
        href,
        ...restProps
    } = props;
    const classes = classnames('btn', className, {
        [`btn-${btnType}`]: btnType,
        [`btn-${size}`]: size,
        'disabled': btnType === 'link' && disabled
    });

    if (btnType === 'link') {
        return <a
            className={classes}
            href={href}
            {...restProps}
        >
            {children}
        </a>;
    }
    return (
        <button
            className={classes}
            disabled={disabled}
            {...restProps}
        >
            {children}
        </button>
    );
};

export default Button;